<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tap" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item v-if="myCreateOrderList" index="myCreate">我创建的</el-menu-item>
      <el-menu-item  index="myCharge">我负责的</el-menu-item>
      <el-menu-item v-if="allOrderList" index="">全部</el-menu-item>
      <!-- v-if="myChargeOrderList" -->
      <!-- <el-menu-item  index="department">部门</el-menu-item> -->
    </el-menu>

    <!--数据列表-->
    <div class="table-container" style="margin-top:0">
      <vxe-grid ref='xGrid'  v-bind="gridOptions" size="mini" :loading="listLoading">
        <template #form>
          <!--搜索-->
          <div>
            <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
              <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
                <el-form-item label="客户编号" >
                   <el-input v-model="listQuery.customerNumber"></el-input>
                </el-form-item>
                <el-form-item label="订单日期" >
                  <el-date-picker
                    v-model="listQuery.createdTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>
                  <el-button
                    v-if="exportAllInLineOrderList&&listQuery.tap==''"
                    @click="downloadExcel"
                    type="primary">
                    导出
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float:right;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>
        <template #toolbar_buttons>
          <div>
            <!-- <el-radio-group v-model="listQuery.onLineState" size="small"  @change="changeState">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="0">待销售确认</el-radio-button>
              <el-radio-button label="1">待销售经理确认</el-radio-button>
              <el-radio-button label="2">流转完成</el-radio-button>
              <el-radio-button label="-1">已取消</el-radio-button>
            </el-radio-group> -->
            <!-- <div style="font-size:12px;line-height: 30px;padding:10px 0;color:#606266 "> -->
              <span style="padding: 0 0 0 20px;">订单数量(吨)：</span><span style="font-weight: bold;color:#000">{{ tonTotal }}</span>
              <span style="padding:0 0 0 20px;">合同总额：</span><span style="font-weight: bold;color:#000">{{ amountTotal }}</span>
              <span style="padding:0 0 0 20px;">毛利合计：</span><span style="font-weight: bold;color:#000">{{ grossProfitTotal }}</span>
            <!-- </div> -->
          </div>
        </template>
        <template #customerName_default="{ row, rowIndex }">
          <div style="white-space: normal;">{{row.customerNumber }}</div>
          <!--是否有权限-->
          <div v-if="row.isShowCustomerName" style="white-space: normal;">{{row.customerName}}</div>
        </template>

        <template #num2_default="{ row, rowIndex }">
          <span>{{row.expectSendDate}}</span>
          <span style="background: red;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '必须'">必须</span>
          <span style="background:#ff6600;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2天'">1-2天</span>
          <span style="background:#ff9900;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '可延1-2周'">1-2周</span>
          <span style="background:#0099ff;color:#fff;padding:0 5px;border-radius: 5px" v-if="row.urgentType == '等客户通知'">等待</span>
        </template>
        <template #num8_default="{ row, rowIndex }">
          <span>{{ row.isContract | formatIsContract }}</span>
        </template>
      </vxe-grid>
    </div>
  </div>
</template>

<script>

import {getCustomerList,getOrderList} from '@/api/allInLine/inquiry'
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  tap: "myCreate" ,//my 我负责  myCreate 我创建 department 部门 ‘’全部
  customerId : "" , //客户id
  createdTime : [],  //订单日期
  orderPayTime : [],  //支付日期
  isOver : "" , //是否超期 1超期 0不
  financeState : '', //财务状态
  onLineState : '', //在线全流程订单状态 -1 取消 0 待销售确认 1待销售经理确认 2完成
  customerNumber:'',
};
export default {
  name: "index",
  data(){
    return {
      btnLoading:false,
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count:0,
      amountTotal:0,
      grossProfitTotal:0,
      tonTotal:0 ,
      listLoading:false,
      goodsSnlist:[], //商品牌号
      loading:false,
      loading2:false,
      customerList:[],
      options:[],
      userOptionList:[],
      type:1,
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'orderList',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        rowConfig: {
          keyField: 'orderId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig:{
          reserve:true
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          }
        },
        columns: [
          {
            field: 'createTime',
            title: '订单日期',
            width: 130,
          },
          {
            field: 'orderSn',
            title: '销售合同号',
            minWidth: 200,
          },
          {
            field: 'customerNumber',
            title: '客户编号',
            minWidth: 200,
            slots:{
              default:"customerName_default"
            }
          },
          {
            field: 'goodsNum',
            title: '合同数量(吨)',
            width: 120,
          },
          {
            field: 'orderShippingFee',
            title: '运费',
            width: 100,
          },
          {
            field: 'orderPrice',
            title: '合同金额',
            width: 150,
          },
          {
            field: 'grossProfit',
            title: '毛利',
            width: 100,
          },
          {
            field: 'expectPayTime',
            title: '合同截止付款时间',
            width: 150,
          },
          // {
          //   field: 'overtime',
          //   title: '是否超期',
          //   width: 100,
          //   slots:{
          //     default:"num4_default"
          //   }
          // },
          {
            field: 'userName',
            title: '业务员',
            width: 100,
          },
          // {
          //   field: 'orderPayTime',
          //   title: '支付日期',
          //   width: 150,
          // },
          // {
          //   field: 'payState',
          //   title: '支付状态',
          //   width: 100,
          //   slots:{
          //     default:"num5_default"
          //   }
          // },
          // {
          //   field: 'customerLabel',
          //   title: '采购评级',
          //   width: 100,
          // },
          // {
          //   field: 'financeState',
          //   title: '财务状态',
          //   width: 100,
          //   slots:{
          //     default:"num7_default"
          //   }
          // },
          // {
          //   field: 'orderState',
          //   title: '订单状态',
          //   width: 150,
          //   slots:{
          //     default:"num6_default"
          //   }
          // },
          {
            field: 'departmentName',
            title: '部门',
            width: 100,
          },
          {
            field: 'onLineRemark',
            title: '作废原因',
            width: 150,
            align:'left',
            showOverflow:true
          },

          {
            field: 'isContract',
            title: '合同上传状态',
            width: 100,
            slots: {
              // 使用插槽模板渲染
              default: 'num8_default',
            }
          },
          // {
          //   field: '',
          //   title: '操作',
          //   width: 100,
          //   fixed:'right',
          //   slots: {
          //     // 使用插槽模板渲染
          //     default: 'num3_default',
          //   }
          // },
        ],
        data:[{}],
      },
      records:[],

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    myCreateOrderList(){
          if(this.roles.indexOf("myCreateOrderList") != -1){
            return true
          }else{
            return false
          }
        },
    allOrderList(){
          if(this.roles.indexOf("allOrderList") != -1){
            return true
          }else{
            return false
          }
    },
    exportAllInLineOrderList(){
      if (this.roles.indexOf("exportAllInLineOrderList") != -1) {
            return true
          }else{
            return false
          }
        },
  },
  created() {
    let now = new Date();
    let today = formatDate(now,'yyyy-MM-dd')
    this.listQuery.createdTime = [today,today]
    this.getList()
  },
  components : {
  },
  filters: {
    // formatOvertime(data){
    //   if(data == 1) {
    //     return '超期'
    //   }else if(data == 0) {
    //     return '没有'
    //   }
    // },
    // formatPayState(data){
    //   if(data == 0) {
    //     return '未支付'
    //   }else if(data == 1) {
    //     return '支付失败'
    //   }else if(data == 2) {
    //     return '支付中'
    //   }else if(data == 3) {
    //     return '已支付'
    //   }
    // },
    // formatOrderState(data){
    //   if(data == -1 ) {
    //     return '取消'
    //   }else if(data == 0) {
    //     return '待销售确认'
    //   }else if(data == 1) {
    //     return '待销售经理确认'
    //   }else if(data == 2) {
    //     return '完成'
    //   }
    // },
    // formatFinanceState(data){
    //   if(data == 0) {
    //     return '财务未审核'
    //   }else if(data == 1) {
    //     return '财务已审核'
    //   }else if(data == 2) {
    //     return '订单关闭'
    //   }else {
    //     return ''
    //   }
    // },
    formatIsContract(data){
      if(data == 1) {
        return '已上传'
      }else if(data == 0) {
        return '未上传'
      }
    },

  },
  methods: {
    //下载表格数据格式化
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 导出
    downloadExcel() {
      let params = JSON.parse(JSON.stringify(this.listQuery));
      params.isExport = 1;
      this.btnLoading = true;
      getOrderList(params)
        .then((res) => {
          this.btnLoading = false;
          require.ensure([], () => {
            const { export_json_to_excel } = require("sheet/Export2Excel");
            const tHeader = res.title;
            const filterVal = res.columns;
            const list = res.list;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, res.fileName);
          });
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    //去详情页
    //  toDetail(item){
    //       let routeData = this.$router.resolve({name:'allInLineOrderDetail',query:{orderId:item.orderId}});
    //       window.open(routeData.href);
    //     },
    //获取询价列表
    getList() {
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery))
      getOrderList(data).then(res => {
        this.gridOptions.data = res.list;
        this.count = res.count;
        this.amountTotal = res.amountTotal
        this.grossProfitTotal = res.grossProfitTotal
        this.tonTotal = res.tonTotal
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },

    changeState(type){
      this.handleSearchList()
      this.listQuery.onLineState=type
    },

    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath){
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.tap = key
      let now = new Date();
      let today = formatDate(now,'yyyy-MM-dd')
      this.listQuery.createdTime = [today,today]
      this.handleSearchList();
    },

    querySearch(queryString){
      if(queryString && queryString!= ''){
        if(this.listQuery.tap=='myCreate'){
          getCustomerList({keywords:queryString,tab:'my'}).then((res)=>{
          this.customerList = res;
        })
        }else{
          getCustomerList({keywords:queryString,tab:'all'}).then((res)=>{
          this.customerList = res;
        })
        }

      }
    },
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

  },
}
</script>

<style scoped lang="scss">

</style>
